/* eslint-disable */
<template>
  <div class="editNodeBox addLinkBox">
    <div class="row node_select_row">
      <div class="title">源节点</div>
      <el-select
        class="selector"
        filterable
        placeholder="选择源节点"
        v-model="addLinkModel.s_id"
        value="value"
        size="mini"
      >
        <el-option
          v-for="item in nodesArr"
          :key="item.uuid"
          :label="item.uuid + ' ' + item.label"
          :value="item.uuid"
        >
        </el-option>
      </el-select>
    </div>
    <div class="row node_select_row">
      <div class="title">目标节点</div>
      <el-select
        class="selector"
        filterable
        placeholder="选择目标节点"
        v-model="addLinkModel.o_id"
        value="value"
        size="mini"
      >
        <el-option
          v-for="item in nodesArr"
          :key="item.uuid"
          :label="item.uuid + ' ' + item.label"
          :value="item.uuid"
        >
        </el-option>
      </el-select>
    </div>
    <div class="row">
      <input class="input" v-model="addLinkModel.predicate" placeholder="连接类型" />
    </div>
    <div class="row">
      <el-button class="el-button" size="mini" v-on:click="wantAddLink"
      >添加</el-button
      >
    </div>
  </div>
</template>

<script>
import { addLinkAPI } from "@/api/kgeditor/elementeditor";

export default {
  name: "addLinkComponent",
  data() {
    return {
      addLinkModel: {
        s_id: "",
        o_id: "",
        predicate: "",
        running: false
      },
      // KgEditor父组件在两层el组件外
      KG: this.$parent.$parent.$parent.$parent.$refs.graphComponent.KG,
      nodesArr: []
    };
  },
  created() {
    this.nodesArr = this.KG.kgInfo.visibleNodes;
  },
  watch:{
    "KG.update.nodes": {
      handler:function() {
        this.nodesArr = null;
        this.nodesArr = this.KG.kgInfo.visibleNodes;
      },
      deep:true
    }
  },
  methods: {
    wantAddLink() {
      if (this.addLinkModel.predicate == "") {
        this.$message.error("连接关系不能为空");
        return;
      }
      if (this.addLinkModel.s_id == "") {
        this.$message.error("源节点不能为空");
        return;
      }
      if (this.addLinkModel.o_id == "") {
        this.$message.error("目标节点不能为空");
        return;
      }
      if (this.addLinkModel.o_id == this.addLinkModel.s_id) {
        this.$message.error("不支持与自身连接");
        return;
      }
      this.addLinkModel.s_id = Number(this.addLinkModel.s_id);
      this.addLinkModel.o_id = Number(this.addLinkModel.o_id)
      if (this.KG.getNodeById(this.addLinkModel.s_id) == null) {
        this.$message.error("源节点不存在！");
        return;
      }
      if (this.KG.getNodeById(this.addLinkModel.o_id) == null) {
        this.$message.error("目标节点不存在！");
        return;
      }
      if (this.addLinkModel.running) {
        this.$message.info("上一次操作尚未完成,请稍等");
        return;
      }
      this.addLink();
    },
    addLink() {
      this.addLinkModel.running = true;
      let _this = this;

      addLinkAPI(
        {
          s_id: this.addLinkModel.s_id,
          o_id: this.addLinkModel.o_id,
          predicate: this.addLinkModel.predicate,
          kgID: this.KG.kgInfo.id
        },
        function(data) {
          _this.addLinkModel.id = data;
          _this.KG.addLink(
            _this.addLinkModel.id,
            _this.addLinkModel.predicate,
            _this.addLinkModel.s_id,
            _this.addLinkModel.o_id
          );
          _this.$message.success("添加连接成功！");
        },
        function(error) {
          _this.$message.error("添加连接失败" + error);
        },()=>{
          _this.addLinkModel.running = false;
        }
      );
    }
  }
};
</script>

<style scoped>
.node_select_row {
  margin-left: 10px;
}
.input {
  display: block;
  margin: 0 auto;
  width: 85%;
  font-size: 10px;
}
</style>
